﻿<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>面试题-动态生成表格</title>
<style>
body{font:700 14px/1.5 Arial;margin:0;padding:0 10px;}
table{clear:both;border:1px solid #000;}
td{color:#000;cursor:pointer;text-align:center;border:1px solid #000;padding:5px;}
#setting{float:left;clear:left;line-height:28px;margin:10px 0;}
#setting input{width:50px;font-family:inherit;border:2px solid #CCC;margin:0 5px;padding:4px;}
#btn{font-size:14px;line-height:18px;color:#fff;text-decoration:none;background:#353535;border-top:1px #999 solid;border-radius:5px;padding:4px 6px;}
#msg{float:left;clear:both;height:25px;display:none;line-height:25px;margin-bottom:10px;}
#msg em{width:25px;height:25px;display:inline-block;margin-right:5px;}
#setting label,#setting input,#setting a,#msg span,#msg em{float:left;}
</style>
<script>
	onload = function(){
		var createBtn = document.getElementById("btn");
		createBtn.onclick = function(){
			var row = document.getElementById("row").value;
			var col = document.getElementById("col").value;
			var tab = document.createElement("table");
			
			document.body.appendChild(tab);
			for(var i=0; i<row; i++){
				var tr = document.createElement("tr");
				for(var j=0; j<col; j++){
					var td = document.createElement("td");
					td.innerHTML = Math.round(Math.random()*100);
					td.style.background = randomColor();
					
					td.onclick = function(){
						this.parentNode.remove();
						//父节点.removeChild(子节点);
						//this.parentNode.parentNode.removeChild(this.parentNode);
					}
					
					tr.appendChild(td);
				}
				tab.appendChild(tr);
			}
		}
	}
	
	function randomColor(){
		var R = Math.floor(Math.random()*256).toString(16);
		var G = Math.floor(Math.random()*256).toString(16);
		var B = Math.floor(Math.random()*256).toString(16);
		return "#" + (R.length<2?"0"+R:R) + (G.length<2?"0"+G:G) + (B.length<2?"0"+B:B);
	}
</script>
</head>
<body>
<div id="setting">
    <label>行数</label><input type="text" id="row">
    <label>列数</label><input type="text" id="col">
    <a href="javascript:;" id="btn">生成表格</a>
</div>
<div id="msg" style="display: none;"></div>


